<template>
  <div class="container">
    <el-dialog :title="setTitle" :visible.sync="dialogVisible" @close='closeDialog' :close-on-click-modal='false'>
      <el-form :model="dataForm" ref="dataForm" :rules="dataRule" size="mini" label-width="120px" class="common-dialog-height" v-loading="formLoading">
        <el-form-item label="参数键：" prop="key">
          <el-input v-model="dataForm.key" placeholder="请参数类型"></el-input>
        </el-form-item>
        <el-form-item label="参数键描述：" prop="desc">
          <el-input v-model="dataForm.desc" placeholder="请输入参数类型名称"></el-input>
        </el-form-item>
        <el-form-item label="参数键值：" prop="value">
          <el-input v-model="dataForm.value" placeholder="请输入参数类型名称"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="order">
          <el-input-number v-model="dataForm.order" controls-position="right" :min="1" :max="999"></el-input-number>
          <span> Tips: 数字越小，排序越前</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
      <el-button type="primary" @click="formDataSubmit()">提 交</el-button>
    </span>
    </el-dialog>
    </div>
</template>
<script>
  export default {
    data () {
      return {
        dialogVisible: false,
        formLoading: false,
        dialogType: '',
        dataForm: {
          id: '',
          key: '',
          desc: '',
          value: '',
          typeId: '',
          order: 999
        },
        dataRule: {}

      }
    },
    computed: {
      setTitle() {
        return this.dialogType === 'edit' ? '编辑参数类型' : '新建参数类型'
      }
    },
    methods: {
      init(params) {
        this.dialogVisible = true
        this.dialogType = params.type
        if(this.dialogType === 'edit'){
          this.formLoading = true
          this.dataForm.id = params.id
          this.$http({
            url: this.$http.adornUrl(`/sys/param/info/${params.id}`),
            method: 'get',
            data: {}
          }).then(response => {
            const result = response.data
            if (result && result.code === 0) {
              if (result.success){
                const data = result.data
                this.dataForm.id = data.id
                this.dataForm.key = data.key
                this.dataForm.desc = data.desc
                this.dataForm.value = data.value
                this.dataForm.typeId = data.typeId
                this.dataForm.order = data.order
              } else {
                this.$message({message: result.msg, type: 'error'})
              }
            }
            this.formLoading = false
          }).catch(reason => {
            this.$message({message: reason, type: 'error'})
            this.formLoading = false
          })
        } else {
          this.dataForm.typeId = params.pid
        }
      },
      formDataSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const data = this.dataForm
            this.$http({
              url: this.$http.adornUrl(`/sys/param/${this.dialogType}`),
              method: 'post',
              data: this.$http.adornData(data,false)
            }).then(response => {
              const result = response.data
              if (result && result.code === 0) {
                if (result.success){
                  this.$emit('refreshData')
                  this.dialogVisible = false
                  this.$message({message: result.msg, type: 'success'})
                } else {
                  this.$message({message: result.msg, type: 'error'})
                }
              }
            }).catch(reason => {
              this.$message({message: reason, type: 'error'})
            })
          }
        })
      },
      closeDialog(){
        this.$refs['dataForm'].resetFields()
        this.dialogType = ''
      }
    }
  }
</script>
<style>
</style>
